<template>
  <el-container>
    <el-aside width="200px" class="sidebar-container">
      <el-menu
        :default-active="$route.path"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router>
        
        <!-- 入住管理 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span>入住管理</span>
          </template>
          <el-menu-item index="/bedOverview">床位全景</el-menu-item>
          <el-menu-item index="/admissionContract">入住签约</el-menu-item>
          <el-menu-item index="/outingRegistration">外出登记</el-menu-item>
          <el-menu-item index="/visitorRegistration">来访登记</el-menu-item>
          <el-menu-item index="/incidentRegistration">事故登记</el-menu-item>
          <el-menu-item index="/dischargeApplication">退住申请</el-menu-item>
        </el-submenu>

        <!-- 其他菜单项可以继续添加 -->
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <h1>入住管理</h1>
      </el-header>
      <el-main>
        <div class="admission-content">
          <!-- 床位全景 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>床位全景</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleBedOverview">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-view" style="font-size: 48px; color: #409EFF;"></i>
              <h2>120</h2>
              <p>总床位数</p>
            </div>
          </el-card>

          <!-- 入住签约 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>入住签约</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdmissionContract">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-document" style="font-size: 48px; color: #67C23A;"></i>
              <h2>15</h2>
              <p>今日签约数量</p>
            </div>
          </el-card>

          <!-- 外出登记 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>外出登记</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleOutingRegistration">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-suitcase" style="font-size: 48px; color: #E6A23C;"></i>
              <h2>8</h2>
              <p>今日外出人数</p>
            </div>
          </el-card>

          <!-- 来访登记 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>来访登记</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleVisitorRegistration">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-user" style="font-size: 48px; color: #F56C6C;"></i>
              <h2>20</h2>
              <p>今日来访人数</p>
            </div>
          </el-card>

          <!-- 事故登记 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>事故登记</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleIncidentRegistration">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-warning-outline" style="font-size: 48px; color: #FF4949;"></i>
              <h2>2</h2>
              <p>今日事故数量</p>
            </div>
          </el-card>

          <!-- 退住申请 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>退住申请</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleDischargeApplication">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-s-check" style="font-size: 48px; color: #409EFF;"></i>
              <h2>3</h2>
              <p>今日退住申请</p>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'AdmissionManagement',
  methods: {
    handleBedOverview() {
      this.$message.success('床位全景详情功能待实现')
    },
    handleAdmissionContract() {
      this.$message.success('入住签约详情功能待实现')
    },
    handleOutingRegistration() {
      this.$message.success('外出登记详情功能待实现')
    },
    handleVisitorRegistration() {
      this.$message.success('来访登记详��功能待实现')
    },
    handleIncidentRegistration() {
      this.$message.success('事故登记详情功能待实现')
    },
    handleDischargeApplication() {
      this.$message.success('退住申请详情功能待实现')
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  background-color: #304156;
}

.admission-content {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box-card {
  width: 30%;
  margin-bottom: 20px;
}

.text-center {
  text-align: center;
  margin-top: 20px;
}
</style> 